<template>
  <div>
    <fullscreen :fullscreen.sync="fullscreen">
      <div class="container">
        <dv-border-box-11 title="消防监测系统">
          <div class="load" v-if="!this.loadinge">
            <dv-loading>Loading...</dv-loading>
          </div>
          <!-- 遮罩层 -->
          <div class="shade" v-if="!this.loadinge">1</div>
          <baidu-map
            :center="center"
            :zoom="zoom"
            @ready="handler"
            class="baidu-map"
          >
            <!-- 全屏按钮 -->
            <div class="fullscreen-button">
              <img
                src="https://img.thgykj.com/thgy-file/XC/blowUp.png"
                v-if="!isFullShow"
                @click="blowUp"
                class="point"
              />
              <img
                src="https://img.thgykj.com/thgy-file/XC/blowDown.png"
                v-if="isFullShow"
                @click="blowUp"
                class="point"
              />
              <el-button
                type="success"
                size="small"
                ref="fullscreenclick"
                @click="fullscreenclick"
                >成功按钮</el-button
              >
            </div>
            <!-- <div class="left">
              <div class="one">
                <dv-border-box-13></dv-border-box-13>
              </div>
              <div class="two">
                <dv-border-box-10
                  :color="['#5378a2', '#FFF']"
                ></dv-border-box-10>
              </div>
              <div class="three">
                <dv-border-box-10
                  :color="['#5378a2', '#FFF']"
                ></dv-border-box-10>
              </div>
            </div>
            <div class="right">
              <div class="fore">
                <dv-border-box-13></dv-border-box-13>
              </div>
              <div class="four">
                <dv-border-box-10
                  :color="['#5378a2', '#FFF']"
                ></dv-border-box-10>
              </div>
              <div class="six">
                <dv-border-box-10
                  :color="['#5378a2', '#FFF']"
                ></dv-border-box-10>
              </div>
            </div> -->
            <!-- 监管时间 -->
            <div class="monitor">
              <div class="txt">系统监测时间</div>
              <div class="reader">
                <div>
                  <i>{{ day }}</i
                  >天
                </div>
                <div>
                  <i>{{ hour }}</i
                  >时
                </div>
                <div>
                  <i>{{ minute }}</i
                  >分
                </div>
                <div>
                  <i>{{ second }}</i
                  >秒
                </div>
              </div>
            </div>
          </baidu-map>
          <!-- 当前日期+当前星期 -->
          <div class="datae">
            {{ nowDate + ' ' + nowWeek }}
          </div>
          <!-- 当前时间 -->
          <div class="timer">
            {{ nowTime }}
          </div>
        </dv-border-box-11>
      </div>
    </fullscreen>
  </div>
</template>
<script>
// import { getTokenTime } from '@/utils/auth'
export default {
  name: 'iot',
  data () {
    return {
      center: { lng: 118.614312, lat: 24.890586 },
      zoom: 18,
      // 动画开光
      loadinge: false,
      nowDate: '', // 当前日期
      nowTime: '', // 当前时间
      nowWeek: '', // 当前星期
      day: '0', //当前天数
      hour: '0', //当前小时
      minute: '0', //当前分钟
      second: '0', //当前秒数
      dialogTableVisible: false,
      // 当前日期和方法的定时器开关
      currenttime: null,
      // 监测时间的定时器开关
      timecollection: null,
      // 全屏开关
      fullscreen: false,
      // 全屏切换按钮
      isFullShow: false,
      time: null
    }
  },
  created () {
    // 全屏状态保持
    console.log('localStorage.getItem', localStorage.getItem('fullscreen'))

    // console.log('this.$fullscreen', this.$fullscreen.isActive())
  },
  mounted () {
    this.currentTime()
    const that = this
    this.$nextTick(() => {
      // console.log('this.$fullscreen', this.$fullscreen)
      // console.log('this.$fullscreen', this.$fullscreen.isActive)
      if (localStorage.getItem('fullscreen') == 'true') {
        console.log('hjghfdghfh')
        this.fullscreen = true
        this.isFullShow = true
        console.log('that.$refs.fullscreenclick',that.$refs.fullscreenclick);
        // that.$refs.fullscreenclick.$el.click()
      }
    })
    // 监听按键事件
    window.addEventListener('keydown', this.KeyDown, true)
    // window.addEventListener('keydown', this.KeyDown)
  },
  beforeDestroy () {
    // console.log('销毁定时器')
    // 在Vue实例销毁前，清除时间定时器
    clearInterval(this.currenttime)
    clearInterval(this.timecollection)
  },
  methods: {
    handler ({ BMap, map }) {
      let that = this
      // console.log(BMap, map);
      // 经度
      this.center.lng = 118.614312
      // 维度
      this.center.lat = 24.890586
      // 地图放大等级
      this.zoom = 14
      map.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用
      map.enableContinuousZoom() // 可拖拽
      // 地图个性化样式
      try {
        map.setMapStyleV2({
          styleId: '82c49024893e8a6e5c496a625e65dd75'
        })
      } catch (erro) {
        return false
      }
      // 这个是遮罩层和加载动画的开关 默认一进到页面加载动画和遮罩层是开启的
      // 还有一个作用就是网络不好时，百度地图加载失败时。会出现白屏现象，加上这个遮罩层和加载动画会显得比较          流畅
      setTimeout(() => {
        this.loadinge = true
      }, 3000)
    },
    // 每0.5秒执行一次
    currentTime () {
      this.currenttime = setInterval(this.getDate, 500)
      this.timecollection = setInterval(this.monitortime, 1000)
    },
    // 获取当前日期时间的方法
    getDate () {
      var _this = this
      //获取年
      let yy = new Date().getFullYear()
      //获取月,注意时间是0-11，0代表1月份
      let mm = new Date().getMonth() + 1
      // 获取具体哪一天
      let dd = new Date().getDate()
      // 获取星期 0-6 0是星期天
      let week = new Date().getDay()
      //获取小时
      let hh = new Date().getHours()
      //获取分钟
      let ms =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      // 获取秒钟
      let mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      // 获取星期
      if (week == 1) {
        this.nowWeek = '星期一'
      } else if (week == 2) {
        this.nowWeek = '星期二'
      } else if (week == 3) {
        this.nowWeek = '星期三'
      } else if (week == 4) {
        this.nowWeek = '星期四'
      } else if (week == 5) {
        this.nowWeek = '星期五'
      } else if (week == 6) {
        this.nowWeek = '星期六'
      } else {
        this.nowWeek = '星期日'
      }
      _this.nowTime = hh + ':' + mf + ':' + ms
      _this.nowDate = yy + '/' + mm + '/' + dd
    },
    // 监测时间
    monitortime () {
      var _that = this
      // 当前时间
      let x = new Date().getTime()
      // console.log('当前时间戳', x)
      //   // 点击登录存的时间
      //   //   let y = getTokenTime()
      //   // console.log('登录时间戳', y)
      //   // 登录之后的监测时间
      //   let z = x - y
      //   // console.log('监测时间', z)
      _that.day = parseInt(x / 1000 / 60 / 60 / 24) //日
      _that.hour = parseInt((x / 1000 / 60 / 60) % 24) //时
      _that.minute = parseInt((x / 1000 / 60) % 60) //分
      _that.second = parseInt((x / 1000) % 60) //秒
    },
    // 全屏按钮
    blowUp () {
      this.fullscreen = !this.fullscreen
      this.isFullShow = !this.isFullShow
      // 全屏状态保持
      localStorage.setItem('fullscreen', this.fullscreen)
    },
    // 键盘F11 事件
    KeyDown (event) {
      console.log('event', event)
      if (event.keyCode === 122) {
        // 不执行默认全屏-不加这行代码会导致地图和容器大小不一情况
        event.returnValue = false
        // 执行全屏
        this.blowUp()
      }
    },
    // 模拟全屏
    fullscreenclick () {
      this.fullscreen = true
      this.isFullShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-color: rgb(9, 18, 32);
  // width: 100%;
  height: 1100px;
  // box-sizing: border-box;
  // 最大边框的样式
  // ::v-deep #dv-full-screen-container {}
  .dv-border-box-11 {
    // background-color: skyblue;
    padding: 62px 9px 10px;
    overflow: hidden;
    border-radius: 55px;
    position: relative;
    .load {
      position: absolute;
      top: 40%;
      left: 50%;
      // margin-left: -37px;
      transform: translateX(-50%);
      z-index: 3;
      .loading-tip {
        margin-top: 15px;
        font-size: 18px;
        color: #fff;
      }
    }
    // 遮罩层
    .shade {
      width: 100%;
      // width: 100%; 取100% margin 右边不会生效 要改成width=99%才有效果
      height: 100%;
      box-sizing: border-box !important;
      // background-color: skyblue;
      margin: 60px 8px 10px;
      background-color: rgb(9, 18, 32);
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
    }
    // 地图
    .baidu-map {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      // z-index: 999;
      display: flex;
      // justify-content: space-between;
      // 去除百度地图的图标
      position: relative;
      ::v-deep .anchorBL {
        display: none !important;
      }
      // 全屏按钮
      .fullscreen-button {
        position: absolute;
        top: 30px;
        right: 40px;
        img {
          width: 30px;
          height: 30px;
          cursor: pointer;
        }
      }
      .left {
        width: 350px;
        height: 800px;
        position: absolute;
        top: 100px;
        left: 2%;
        // background-color: skyblue;
        // margin-left: 50px;
        .one {
          height: 130px;
          // background-color: skyblue;
        }
        .two {
          height: 250px;
          background-color: rgb(2, 52, 126);
          border-radius: 3px;
          margin: 40px 0 40px;
        }
        .three {
          height: 250px;
          background-color: rgb(2, 52, 126);
          border-radius: 3px;
        }
      }
      .right {
        width: 350px;
        height: 800px;
        position: absolute;
        top: 100px;
        right: 2%;
        // background-color: skyblue;
        // margin-right: 50px;
        .fore {
          height: 130px;
          // background-color: skyblue;
        }
        .four {
          height: 250px;
          background-color: rgb(2, 52, 126);
          border-radius: 3px;
          margin: 40px 0 40px;
        }
        .six {
          height: 250px;
          background-color: rgb(2, 52, 126);
          border-radius: 3px;
        }
      }
      // 监测时间
      .monitor {
        width: 320px;
        height: 95px;
        // background-color: skyblue;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        .txt {
          width: 135px;
          color: #fff;
          font-size: 22px;
          margin: 2px auto;
        }
        .reader {
          color: #afafaf;
          display: flex;
          justify-content: space-between;
          margin-top: 12px;
          div {
            display: flex;
            align-items: baseline;
            i {
              font-style: normal;
              display: block;
              width: 50px;
              height: 50px;
              box-sizing: border-box;
              font-size: 20px;
              color: #fff;
              margin-right: 8px;
              background-color: rgb(5, 47, 115);
              border: 3px solid rgb(6, 116, 190);
              border-radius: 5px;
              line-height: 44px;
              text-align: center;
            }
            &:first-child {
              i {
                width: 80px;
              }
            }
          }
        }
      }
    }
    // 左上角日期星期
    .datae {
      // background-color: skyblue;
      font-size: 18px;
      position: absolute;
      top: 7px;
      left: 200px;
      color: #fff;
    }
    // 右上角的当前时间
    .timer {
      // background-color: skyblue;
      font-size: 18px;
      position: absolute;
      top: 7px;
      right: 200px;
      color: #fff;
    }
  }
}
</style>
